<template>
  <div class="dashboard-container" v-loading="loading">
    <!--头部部分-->
    <div class="header">
      <scoreboard kb="kb1" title="累计访问人数" :data="baseData[0]" />
      <scoreboard kb="kb2" title="新访问人数" :data="baseData[1]" />
      <scoreboard kb="kb3" title="访问人数" :data="baseData[2]" />
      <scoreboard kb="kb4" title="人均停留时长" :data="baseData[3]" />
      <scoreboard kb="kb5" title="次均停留时长" :data="baseData[4]" />
      <scoreboard kb="kb6" title="商圈点击次数" :data="baseData[5]" />
    </div>
    <!--/头部部分-->
    <!--中间部分-->
    <div class="middle">
      <report-chart
        ref="reportChartRef"
        :analyzeData="analyzeData"
      ></report-chart>
      <div class="gird">
        <gird-item title="入驻物业总数" :icon="0" :data="storeCount" />
        <gird-item title="投放广告总数" :icon="1" :data="advertCount" />
      </div>
      <div class="gird">
        <gird-item title="入驻小区总数" :icon="2" :data="CommunityCount" />
        <gird-item title="人员总数" :icon="3" :data="ownerCount" />
      </div>
    </div>
    <!--/中间部分-->
    <!--底部部分-->
    <div class="bottom">
      <aera-table
        :table-data="communityList"
        @load="loadNext"
        @sort="sortArea"
        :areaTableLoadingStatus="areaTableLoadingStatus"
      ></aera-table>
      <div class="bottom-right">
        <people-chart
          ref="peopleChartRef"
          :data="ownerAnalyse"
          :owner-count="ownerCount"
        ></people-chart>
      </div>
    </div>
    <!--/底部部分-->
  </div>
</template>

<script>
import Scoreboard from "@/views/home/components/Scoreboard";
import ReportChart from "@/views/home/components/ReportChart";
import GirdItem from "@/views/home/components/GirdItem";
import AeraTable from "@/views/home/components/AreaTable";
import PeopleChart from "@/views/home/components/PeopleChart";

import {
  getBaseData,
  getAdvertDataAnalyze,
  getCommunityCount,
  getAdvertCount,
  getStoreCount,
  getOwnerCount,
  getCommunityList,
  getOwnerAnalyse,
} from "@/api/home";
import { throttle, debounce } from "lodash";

export default {
  name: "Bashboard",
  components: {
    Scoreboard,
    ReportChart,
    GirdItem,
    AeraTable,
    PeopleChart,
  },
  props: {},
  data() {
    return {
      loading: false,
      analyzeData: [],
      baseData: [],
      // 小区总数
      CommunityCount: 0,
      // 广告总数
      advertCount: 0,
      // 物业总数
      storeCount: 0,
      // 人员总数
      ownerCount: 0,
      queryInfo: {
        offset: 1,
        limit: 10,
        isDetail: true,
        sortFlag: "",
      },
      totalPage: 2,
      currPage: 1,
      communityList: [],
      ownerAnalyse: [],
      areaTableLoadingStatus: false,
    };
  },
  async created() {
    this.loading = true;
    await Promise.all([
      this.getBaseData(),
      this.getAdvertDataAnalyze(),
      this.getCommunityCount(),
      this.getStoreCount(),
      this.getAdvertCount(),
      this.getOwnerCount(),
      this.getCommunityList(),
      this.getOwnerAnalyse(),
    ]);
    this.loading = false;
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    // 获取基础统计数据
    async getBaseData() {
      const { data, code, msg } = await getBaseData();
      if (code !== 0) return this.$message.error(msg);
      this.baseData = data.map((item) => {
        return {
          total: item.value,
          time: {
            day: item.dayChainRatio || "0%",
            week: item.weekChainRatio || "0%",
            month: item.mouthChainRatio || "0%",
          },
        };
      });
    },
    // 获取广告数据分析数据
    async getAdvertDataAnalyze() {
      const { data, code, msg } = await getAdvertDataAnalyze();
      if (code !== 0) return this.$message.error(msg);
      this.analyzeData = data;
      this.$nextTick(() => {
        this.$refs.reportChartRef.initChart();
      });
    },
    // 查询小区总数
    async getCommunityCount() {
      const { data, code, msg } = await getCommunityCount();
      if (code !== 0) return this.$message.error(msg);
      this.CommunityCount = data;
    },
    // 查询广告总数
    async getAdvertCount() {
      const { data, code, msg } = await getAdvertCount();
      if (code !== 0) return this.$message.error(msg);
      this.advertCount = data;
    },
    // 查询入驻物业总数
    async getStoreCount() {
      const { data, code, msg } = await getStoreCount();
      if (code !== 0) return this.$message.error(msg);
      this.storeCount = data;
    },
    // 查询人员总数
    async getOwnerCount() {
      const { data, code, msg } = await getOwnerCount();
      if (code !== 0) return this.$message.error(msg);
      this.ownerCount = data;
    },
    // 查询小区列表
    async getCommunityList() {
      const { data, code, msg } = await getCommunityList(this.queryInfo);
      if (code !== 0) return this.$message.error(msg);
      this.communityList = [
        ...this.communityList,
        ...data.list.map((item) => {
          return {
            area: item.name,
            populations: item.ownerNum,
            houses: item.houseNum,
            parking: item.parkingSpaceNum,
            shops: item.storeNum,
            ad: item.advertNum,
            time: item.createTime,
          };
        }),
      ];
      this.currPage = data.currPage;
      this.totalPage = data.totalPage;
      console.log("data", data);
      console.log("当前页", data.customClass);
      console.log("总页数", data.totalPage);
    },
    // 翻页事件
    loadNext: debounce(function () {
      if (this.totalPage > this.currPage) {
        this.queryInfo.offset = this.currPage + 1;
        // this.$message.info(`第${this.queryInfo.offset}页`)
        this.getCommunityList();
      } else {
        // this.$message.info('到头了')
        return;
      }
    }, 500),
    // 查询人员总数
    async getOwnerAnalyse() {
      const { data, code, msg } = await getOwnerAnalyse();
      if (code !== 0) return this.$message.error(msg);
      this.ownerAnalyse = data;
      this.$nextTick(() => {
        this.$refs.peopleChartRef.initChart();
      });
    },
    // 小区排序
    async sortArea(key) {
      this.areaTableLoadingStatus = true;
      this.queryInfo.sortFlag = key;
      this.queryInfo.offset = 1;
      this.communityList = [];
      await this.getCommunityList();
      this.areaTableLoadingStatus = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 26px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .middle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 26px;

    .gird {
      width: 10.7%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
  }

  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 26px;

    .bottom-right {
      z-index: 999;
      width: 22.8%;
    }
  }
}
</style>
